/**
 * @name MobxTest
 * @description mobx异步接口测试
 */

import React, { Component } from "react";
import { Input, Empty } from "antd";
import { Title } from "@/component";
import { inject, observer } from "mobx-react";
import { addressGet } from "@/api/test";

import styles from "./styles.module.less";

@inject("loginStore")
@observer
class MobxTest extends Component {
  state = {
    data: "",
    address: "",
    IP:''
  };
  componentDidMount() {
    this.IPEnter();
  }
  /**
   * @name mobxChange
   * @description 异步修改
   */
  mobxChange = (value) => {
    this.props.loginStore.loginMess(value);
  };

  /**
   * @name mobxEnter
   * @description mobx接口请求
   */
  mobxEnter = async (value) => {
    const res = await this.props.loginStore.dictionaries(value);
    console.log("index====", res);
    this.setState({ data: !res ? "" : res });
  };
  /**
   * @name IPEnter
   * @desc 测试获取api 百度的普通IP定位没有数据聚合的详细；但百度可以为空时获取当前请求IP地址
   */
  IPEnter = async (val) => {
    //通过搜狐获取本机IP
    const souhu = window && window.returnCitySN;
    let ip = souhu ? souhu.cip : "";
    console.log("souhu--data====", val);
    const { type, res } = await addressGet(val ? val : ip);
    if (type) {
      this.setState({ address: res.result,IP:ip });
    } else {
      this.setState({ address: "暂无数据",IP:ip });
    }
  };

  render() {
    const { data, address,IP } = this.state;

    return (
      <div>
        <div className={styles.block}>
          <Title text="mobx测试" />
          <Input placeholder="输入名称" onChange={(e) => this.mobxChange(e.target.value)} />
          {/**<Input value={this.props.loginStore.name} readOnly={true} /> */}
          <Input value={this.props.loginStore.name} readOnly={true} />
        </div>
        <div className={styles.block}>
          <Title text="mobx-字典接口测试" />
          <Input placeholder="输入单个文字，回车" onPressEnter={(e) => this.mobxEnter(e.target.value)} />
          {!data ? (
            <Empty />
          ) : (
            <div>
              <div>{JSON.stringify(data.jijie)}</div>
            </div>
          )}
        </div>
        <div className={styles.block}>
          <Title text="数据聚合api-IP定位" />
          <Input placeholder="输入xxxx.xxxx.xxxx.xxxx IP地址" onPressEnter={(e) => this.IPEnter(e.target.value)} />
          <div>IP：{IP}</div>
          <div>{address && JSON.stringify(address)}</div>
        </div>
      </div>
    );
  }
}

export default MobxTest;
